

import React, { useState } from 'react';
import { Form, DatePicker, TimePicker, Button, Input, Select, Descriptions, Radio } from 'antd';
import { TreeSelect, Upload } from 'antd';
import { Mentions,Table } from 'antd';
import { history } from 'umi'
import './dispose.css';

// 冯小建--请假审批
const { RangePicker } = DatePicker;
const { Option } = Select;

const formItemLayout = {
    labelCol: {
        // xs: { span: 24 },
        // sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
// 学生信息布局
const messItemLayout = {

};
const config = {
    rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
};
const rangeConfig = {
    rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};

// 审批状态
const { TreeNode } = TreeSelect;

//表格
const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];
  
  const columns = [
    {
      title: '操作人',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作事项',
      dataIndex: 'age',
      key: 'age',
    },
    {
        title: '事项状态',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '操作时间',
        dataIndex: 'age',
        key: 'age',
      },
    {
      title: '说明',
      dataIndex: 'address',
      key: 'address',
    },
  ];



const dispose = () => {

    const [value, setValue] = useState(undefined);
    const onChange = () => {
        setValue(value);
    };

    const [form] = Form.useForm();

    // 上传附件
    const normFile = (e: any) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    // 查询
    const onFinish = (fieldsValue: any) => {
        // Should format date value before submit.
        const rangeValue = fieldsValue['range-picker'];
        const rangeTimeValue = fieldsValue['range-time-picker'];
        const values = {
            ...fieldsValue,
            'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
            'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
            'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
            'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
            'range-time-picker': [
                rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
                rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
            ],
            'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
        };
        console.log('Received values of form: ', values);
    };



    return (
        <div style={{ paddingLeft: '2%' }}>
            {/* 新增请假*/}
            <div>
                {/* 学生信息 */}
                <div style={{ marginBottom: '20px' }}>
                    <Descriptions title="请假处理" column={{ xs: 3, sm: 4, md: 4 }} >
                        <Descriptions.Item label="姓名">小张</Descriptions.Item>
                        <Descriptions.Item label="学号">1810000000</Descriptions.Item>
                        <Descriptions.Item label="院系">软件学院</Descriptions.Item>
                        <Descriptions.Item label="专业">软件工程</Descriptions.Item>
                        <Descriptions.Item label="年级"> 2018</Descriptions.Item>
                        <Descriptions.Item label="班级">/</Descriptions.Item>
                        <Descriptions.Item label="班主任">王老师</Descriptions.Item>
                    </Descriptions>
                </div>

                {/* 请假表单 */}
                <Form form={form} name="time_related_controls" className='absence-form' {...formItemLayout} onFinish={onFinish}>

                    <div style={{ width: '80%' }}>
                        <Form.Item label="主 题：" name="note" style={{ width: '94%' }} rules={[{ required: true }]}>
                        <Mentions style={{ width: '100%' }} placeholder="开始时间：" disabled></Mentions>
                        </Form.Item>
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 时间选择 */}
                        <Form.Item name="range-picker" label="申请提交日期：" {...rangeConfig}  >
                            {/* <RangePicker style={{ width: '60%', marginLeft: '0' }} /> */}
                            <Mentions style={{ width: '30%' }} placeholder="开始时间：" disabled></Mentions>
                            <Mentions style={{ width: '30%',marginLeft:"10px" }} placeholder="结束时间:" disabled></Mentions>
                        </Form.Item>
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 请假原因 */}
                        <Form.Item name="radio-group" label="请假原因" rules={[{ required: true }]} >
                            <Radio.Group>
                                <Radio value="事假" disabled>事假</Radio>
                                <Radio value="病假" disabled>病假(需附校医院证明)</Radio>
                                <Radio value="其他" disabled>其他</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 详细原因 */}
                        <Form.Item name="detaile" style={{ width: '94%' }} >
                            <Input.TextArea style={{ height: '100px' }} placeholder='请输入请假具体原因' disabled/>
                        </Form.Item>
                    </div>

                    {/* 上传附件 */}
                    <Form.Item
                        rules={[{ required: true }]}
                        name="upload"
                        label="相关附件"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        extra="校医证明1.png"
                    >
                        <Upload name="logo" action="/upload.do" listType="picture">
                            <Button className='ant-btn ant-btn-primary addLeave' >上传附件</Button>
                        </Upload>
                    </Form.Item>

                    <div style={{ width: '100%' }}>
                        {/* 审批人 */}
                        <Form.Item style={{ width: '20%' }}
                            rules={[{ required: true }]}
                            name="upload"
                            label="审批人">
                            
                            <Mentions style={{ width: '100%' }} placeholder="王老师" disabled></Mentions>
                        </Form.Item>
                    </div>

                    {/* 流程管理 */}
                    <div>
                        <Table dataSource={dataSource} columns={columns} /> 
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 按钮 */}
                        <Form.Item
                            wrapperCol={{
                                // xs: { span: 24, offset: 0 },
                                // sm: { span: 16, offset: 8 },
                            }}>
                            <Button type="primary" htmlType="button">审批通过</Button>
                            <Button htmlType="button" style={{ marginLeft: '1%' }}>审批不通过</Button>
                            <Button htmlType="button" onClick={() => history.push('/teacher/absence/index')} style={{ marginLeft: '1%' }}>返回</Button>
                        </Form.Item>
                    </div>


                </Form>


            </div>

        </div>
    );
};

export default dispose;
